<template>
  <div>
    <div><h2>P4接口</h2></div>
    <div>
      <el-card class="box-card">
        <strong>接口总览</strong>
        <div>
          <el-table :data="InterfaceData" stripe style="width: 100%">
            <el-table-column prop="network" label="网络" width="180">
            </el-table-column>
            <el-table-column prop="state" label="状态" width="680">
            </el-table-column>
            <el-table-column fixed="right" label="动作" align="center">
              <template>
                <el-button class="connect" size="medium">连接</el-button>
                <el-button class="close" size="medium">关闭</el-button>
                <el-button class="change" size="medium">修改</el-button>
                <el-button class="delete" size="medium">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 添加按钮 -->
        <el-button class="add" size="medium">添加新接口...</el-button>
      </el-card>
      <br />
      <div>
        <el-card shadow="always">    
        <strong>全局网络选项</strong>
          <div class="input">
            IPv6 ULA前缀
            <el-input
              placeholder=""
              v-model="input"
              clearable
              style="width: 380px"
            ></el-input>
          </div>
        </el-card>
      </div>  
    </div>
    <el-divider></el-divider>
    <div style="text-align:right">
        <el-button class="use" size="medium">保存&应用</el-button>
        <el-button class="save" size="medium">保存</el-button>
        <el-button class="reset" size="medium">复位</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        // 接口数据
      InterfaceData: [
        {
          network: "",
          state: "",
        },
        {
          network: "",
          state: "",
        },
      ],
      input: "",
    };
  },
};
</script>

<style scoped>
.connect {
  background: blueviolet;
  color: #fff;
}
.close {
  background: springgreen;
  color: #fff;
}
.change {
  background: slateblue;
  color: #fff;
}
.delete {
  background: tomato;
  color: #fff;
}
.input {
  position: relative;
  left: 190px;
}
.add {
  background: blueviolet;
  color: #fff;
  position: relative;
  top: 10px;
}
/*  */
.use {
  background: slateblue;
  color: #fff;
}
.save {
  background: blueviolet;
  color: #fff;
}
.reset {
  background: springgreen;
  color: #fff;
}
</style>